<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<title>Kinect Surfing Console</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

var lastInY = 0; var thisInY = 0;
var lastOutY = 0; var thisOutY = 0;
var altWindow;
var headingWindow;
var speedWindow;
var bandwidthWindow;
var kbps = 0.0;
//var bearings = [ 'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];

var lastLat = 0.0; var lastLon = 0.0;
var ballLat = 0.0; var ballLon = 0.0;

$(function () {
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
    
        var chartIn;
        chartIn = new Highcharts.Chart({
            chart: {
                renderTo: 'inbound',
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function() {
    
                        // set up the updating of the chart each second
                        var series = this.series[0];

                        setInterval(function() {
                            var x = (new Date()).getTime(); // current time

	//$.getJSON('/cgi-bin/injson.pl', function(data) {
	//	$.each(data, function(key, val) {
	//		if (key == "in") { thisInY = parseInt(val); }
	//		//console.log("key:" + key + " val:" + parseInt(val) );
	//	});
	//});
			var rateInY = 10 * (thisInY - lastInY); // bytes * 10  = bps

			//console.log("rateInY=" + rateInY);
			if (Math.abs(rateInY) > 1000000000) { //console.log("rateInY ZERO");
				rateInY = 0; }

			lastInY = thisInY;
			kbps = rateInY /1024 /1024;
			//console.log("kbps=" + kbps);
			if (kbps < 10) { // don't od with signficant figures
				bandwidthWindow.innerHTML = kbps.toFixed(1);
			} else {
				bandwidthWindow.innerHTML = Math.round(kbps);
			}

                            series.addPoint([x, rateInY], true, true);
                        }, 1000);
                    }
                }
            },
            title: { text: 'INTERNET DOWNLOAD BANDWIDTH' },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: { text: 'bits per second' },
		min: 0, // Alf
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
          //  tooltip: {
          //     formatter: function() {
          //            return '<b>'+ this.series.name +'</b><br/>'+
          //            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
          //            Highcharts.numberFormat(this.y, 2);
          //      }
          //  },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Internet IN',
		type: 'areaspline', // was line
                data: (function() {
                    // generate start data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
    
                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: 0
                        });
                    }
                    return data;
                })()
            }]
        });
	// second chart
        var chartOut;
        chartOut = new Highcharts.Chart({
            chart: {
                renderTo: 'outbound',
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function() {
    
                        // set up the updating of the chart each second
                        var series = this.series[0];

                        setInterval(function() {
                            var x = (new Date()).getTime(); // current time
				$.getJSON('/cgi-bin/netjson.pl', function(data) {
				$.each(data, function(key, val) {
					if (key == "out") { thisOutY = parseInt(val); }
					if (key == "in") { thisInY = parseInt(val); }
					//console.log("key:" + key + " val:" + parseInt(val) );
		});
	});
			var rateOutY = 10 * (thisOutY - lastOutY);
			//console.log("rateOutY=" + rateOutY);
			if (Math.abs(rateOutY) > 1000000000) { //console.log("rateOut ZERO");
				rateOutY = 0; }

			lastOutY = thisOutY;

                            series.addPoint([x, rateOutY], true, true);
                        }, 1000);
                    }
                }
            },
            title: { text: 'CACHE OUTPUT BANDWIDTH' },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: { text: 'bits per second' },
		min: 0, // Alf
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
          //  tooltip: {
          //     formatter: function() {
          //            return '<b>'+ this.series.name +'</b><br/>'+
          //            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
          //            Highcharts.numberFormat(this.y, 2);
          //      }
          //},
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Cache OUT',
		type: 'areaspline', // default is line
                data: (function() {
                    // generate start data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
    
                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: 0
                        });
                    }
                    return data;
                })()
            }]
        });

    });
    
});
</script>

<script type="text/javascript"> // ---- map object --- Alf

var map = null;
var markerRig = null;
var markerModel = null;
var follow = true;
var curZoom = 11;

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function request() {
    http.open('get', '/latlongalt');
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {

    if(http.readyState == 4){
        var response = http.responseText;

        s = response.split(","); // place lat,long,alt into s[0],s[1],s[2]
	//console.log("reading latlongalt");

        if(s.length == 4){
		var thisLat = parseFloat(s[0]); var thisLon = parseFloat(s[1]);
		var latlng = new google.maps.LatLng( thisLat, thisLon );
		var latlngModel = new google.maps.LatLng( ballLat, ballLon );
		var alt = Math.round(parseFloat(s[2]));
		var heading = Math.round( parseFloat(s[3]) );
		//console.log(alt);
		if (alt < 10000) { // play around with significant figures
			altWindow.innerHTML = alt + "m";
		} else if (alt < 50000) {
			var kalt = alt / 1000;
			altWindow.innerHTML = kalt.toFixed(1) + "km";
		} else if (alt < 1000000) {
			altWindow.innerHTML = Math.round(alt/1000) + "km";
		} else {
			altWindow.innerHTML = "Space";
		}
		var bearing = heading;
		if (bearing < 0) { bearing += 360; }
		var bindex = Math.floor(((bearing + 11) /22.5) % 16);
		//headingWindow.innerHTML = bearings[bindex];
		//console.log("icon:"+bearingIcons[bindex]);
		markerRig.setIcon(bearingMarkers[bindex]);
		var distance = greatcircle( lastLat, lastLon, thisLat, thisLon, alt);
		var speed = distance * 5; // 4 a second
		if (speed < 10) { // muck about with significant figures
			speedWindow.innerHTML = speed.toFixed(1);  
		} else if (speed < 400) {
			speedWindow.innerHTML = Math.round(speed);  
		} else {
			speedWindow.innerHTML = "Warp!";
		}

            if(follow) {
		
		var zoom = Math.round(22 - (Math.log(Math.abs(alt)) / Math.log(2)));
		if(zoom < 2) { zoom = 2; }
		if(zoom > 15) { zoom = 15; } 
		if (zoom != curZoom) {
			map.setZoom(zoom);
			curZoom = zoom;
			//console.log("map zoom:" + zoom);
		}
                map.panTo(latlng);
		}

		lastLat = thisLat; lastLon = thisLon;

            markerRig.setPosition(latlng);
            markerModel.setPosition(latlngModel);
        }

        setTimeout("request()", 250);
    }

function toRad( val ) {
    return val * Math.PI / 180;
}

function greatcircle(lat1, lon1, lat2, lon2, alt) {
 var R = 6371 + Math.round(alt)/1000; // km
 var dLat = toRad(lat2-lat1);
 var dLon = toRad(lon2-lon1);
 var lat1 = toRad(lat1);
 var lat2 = toRad(lat2);

 var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2); 
 var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
 var d = R * c;
return d;
}
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var NIcon = new google.maps.MarkerImage( '/images/N.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var NNEIcon = new google.maps.MarkerImage( '/images/NNE.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var NEIcon = new google.maps.MarkerImage( '/images/NE.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var ENEIcon = new google.maps.MarkerImage( '/images/ENE.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var EIcon = new google.maps.MarkerImage( '/images/E.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var ESEIcon = new google.maps.MarkerImage( '/images/ESE.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var SEIcon = new google.maps.MarkerImage( '/images/SE.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var SSEIcon = new google.maps.MarkerImage( '/images/SSE.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var SIcon = new google.maps.MarkerImage( '/images/S.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var SSWIcon = new google.maps.MarkerImage( '/images/SSW.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var SWIcon = new google.maps.MarkerImage( '/images/SW.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var WSWIcon = new google.maps.MarkerImage( '/images/WSW.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var WIcon = new google.maps.MarkerImage( '/images/W.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var WNWIcon = new google.maps.MarkerImage( '/images/WNW.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var NWIcon = new google.maps.MarkerImage( '/images/NW.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var NNWIcon = new google.maps.MarkerImage( '/images/NNW.png',
		new google.maps.Size(240,240), new google.maps.Point(0,0),
		new google.maps.Point(48,48), new google.maps.Size(96,96));
var bearingIcons = [
	'/images/N.png', '/images/NNE.png', '/images/NE.png', '/images/ENE.png',
	'/images/E.png', '/images/ESE.png', '/images/SE.png', '/images/SSE.png',
	'/images/S.png', '/images/SSW.png', '/images/SW.png', '/images/WSW.png',
	'/images/W.png', '/images/WNW.png', '/images/NW.png', '/images/NNW.png' ];
var bearingMarkers = [ NIcon, NNEIcon, NEIcon, ENEIcon, EIcon, ESEIcon, SEIcon, SSEIcon,
	SIcon, SSWIcon, SWIcon, WSWIcon, WIcon, WNWIcon, NWIcon, NNWIcon ];

  function map_initialize() {
    var latlng = new google.maps.LatLng(-33.85, 151.644);
    var myOptions = {
      zoom: curZoom,
      center: latlng,
	disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    markerRig = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Kinect Surfer",
	icon: NIcon
    });

	var ballIconPath = '/images/beachball32.png';
	var ballPoint = new google.maps.Point( 16, 16 ); // make middle of ball the anchor
	var ballMarkerImage = new google.maps.MarkerImage( ballIconPath, null, null, ballPoint, null );

    markerModel = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Tablet",
	icon: ballMarkerImage
    });

    request();
  }
</script>
<script src="dotman.js"></script>
<script type="text/javascript"> // launch map after everything is drawn
        if( window.addEventListener )
            window.addEventListener( 'load', map_initialize, false );
        else
            window.attachEvent( 'onload', map_initialize );
</script> 
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px; overflow:hidden; font-family:sans-serif; }
<!--  #map_canvas { height: 60% } -->
.right { position:absolute; right:0px; }
#dotman_canvas { box-shadow: 0px 0px 10px #ccc; margin: 0px 0px; background: #3E576F; }
.crush { line-height:0.5 }
smallBr { font-size:150%; line-height:1 }
</style>
</head>
<body>
<script src="../highcharts/js/highcharts.js"></script>
<table border="0" width="100%" height="100%" cellpadding="12" cellspacing="0">
<tr>
<td width="40%" height="100%" valign="top" align="center">
<br>
<img src="/images/wonderama-surfer-white.png" width="860" alt="Wonderama">
<p style="font-family: sans-serif; font-size:32pt; color:#3E576F; line-height:0.1">University of Western Sydney</p>
<p style="font-size:21pt; color:#3E576F; line-height:0.01">eResearch + School of Computing, Engineering &amp; Mathematics</p>
</td>
<td with="20%" align="center">
<img src="/images/uws-big2.png" width="185"><br><br>
<img src="/images/gsoc.jpg" width="191"><br><br>
<img src="/images/aarnet3.gif" width="185">
</td>
<td width="40%">
<div id="inbound"    style="min-width:720px; min-height:170px"></div>
<div id="outbound"   style="mind-width:720px; min-height:170px"></div>
</td>
</tr>
<!-- bottom 2 thirds -->
<tr>
<td align="center" valign="top">
<div id="map_canvas" style="height:665px"></div>
</td>
<td valign="top" align="center">
<br><br>
<p style="font-size:160%; color:#3E576F; line-height:0.0">Altitude</p>
<p style="font-size:400%; color:black; line-height:0.0;"><label id="altwindow">ALT</label></p>
<p class="smallBr">&nbsp;</p>
<p style="font-size:160%; color:#3E576F; line-height:0.0">Speed (km/sec)</p>
<p style="font-size:440%; color:black; line-height:0.0"><label id="speedwindow">SPD</label></p>
<p class="smallBr">&nbsp;</p>
<p style="font-size:150%; color:#3E576F; line-height:0.0">Bandwidth&nbsp;(mbps)</p>
<p style="font-size:440%; color:black; line-height:0.0"><label id="bandwidthwindow">MBPS</label></p>
</td>
<td valign="top"i align="right">
<canvas id="dotman_canvas" width="760" height="570"></canvas>
<p style="font-family:monospace;color:#000;font-size=10pt;"><label id="logwindow">1some websocket console text some websocket console text some websocket console text<br>
</label></p>
</td>
</tr>
</table>
</body>
</html>
